<!DOCTYPE html>
<html class="overflow-hidden">
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="no"/>
    <meta name="wap-font-scale" content="no">
    <meta content="telephone=no" name="format-detection">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>礼仪之邦-个人中心</title>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/swiper.min.css"/>
    <link rel="stylesheet" href="css/public.css"/>
    <link rel="stylesheet" href="css/app.css"/>
</head>
<body class="overflow-hidden">
<div class="main-box">
    <div class="block-bar">
        <div class="personal-hd">
            <img src="img/personal-hd.jpg"/>
            <a href="javascript:;" class="tools">
                <i class="icon-personal icon-tools"></i>
            </a>

            <div class="title">
                <div class="head-img">
                    <a href="javascript:;"><img src="img/personal-img.jpg"></a>
                </div>
                <div class="personal-info">
                    <a class="personal-login" href="#">登录/注册</a>
                </div>
                <div class="personal-info" style="display: none;">
                    <p class="show-rank" id="J-name">
                        <span class="text-overflow">15487812484554@qq.com</span>
                        <i class="icon-personal icon-character icon-cai"></i>
                        <i class="icon-personal icon-character icon-pu"></i>
                        <i class="icon-personal icon-character icon-yuan"></i>
                        <i class="icon-personal icon-character icon-qi"></i>
                        <i class="icon-personal icon-character icon-yun"></i>
                        <i class="icon-personal icon-character icon-gong"></i>
                        <i class="icon-personal icon-character icon-jing"></i>
                        <i class="icon-personal icon-character icon-ji"></i>
                    </p>

                    <p class="text-clamp-overflow">欢迎您</p>
                </div>
            </div>

        </div>
        <div class="line"></div>
        <div class="order-title">
            <a href="javascript:;">
                <span>实物产品订单</span>
                <span class="all-order">查看全部实物订单<i class="icon-personal icon-next"></i></span>
            </a>
        </div>
        <div class="list-row order-list">
            <ul class="row-5 title-hd">
                <li>
                    <a href="javascript:;">
                        <span class="icon-personal icon-readypay"><i class="showNumerBar">1</i></span>
                        <span>待付款</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <span class="icon-personal icon-readysend"><i class="showNumerBar">1</i></span>
                        <span>待发货</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <span class="icon-personal icon-send"><i class="showNumerBar">1</i></span>
                        <span>已送货</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="icon-personal icon-tuihuo"></i>
                        <span>退货退款</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="icon-personal icon-fire"></i>
                        <span>伙拼订单</span>
                    </a>
                </li>
            </ul>
        </div>
        <div class="line"></div>
        <div class="list-row order-list">
            <ul class="row-4">
                <li>
                    <a href="javascript:;">
                        <i class="icon-personal icon-collect"></i>
                        <span>我的收藏</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="icon-personal icon-address"></i>
                        <span>地址管理</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="icon-personal icon-footprint"></i>
                        <span>我的足迹</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="icon-personal icon-favorable"></i>
                        <span>优惠券</span>
                    </a>
                </li>
            </ul>
            <ul class="row-4">
                <li>
                    <a href="javascript:;">
                        <i class="icon-personal icon-service"></i>
                        <span>客服服务</span>
                    </a>
                </li>
                <!--下面三选一，同时记得补充空的li-->
                <li>
                    <a href="javascript:;">
                        <i class="icon-personal icon-packet"></i>
                        <span>发红包给好友</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="icon-personal icon-carve"></i>
                        <span>我要创业</span>
                    </a>
                </li>
                <li>
                    <a href="javascript:;">
                        <i class="icon-personal icon-money"></i>
                        <span>我的资产</span>
                    </a>
                </li>
            </ul>
            <ul class="row-4">
                <li>
                    <a href="javascript:;">
                        <i class="icon-personal icon-money2"></i>
                        <span>我的钱包</span>
                    </a>
                </li>
            </ul>
        </div>
    </div>
</div>


<!--引导页-->
<div class="disk" id="disk" style="display: none;"></div>
<div class="guide" style="width: 107px; height: 244px; top: 121px; left: 23.75%;  display: none;">
    <img src="img/personal-guide.png">
    <a id="guide" href="javascript:;"></a>
</div>
<!--2017-03-08 分享给朋友引导-->
<div class="disk" id="disk2" style="display: block;">
    <div class="guide" style="width: 218px; height: 165px; top: 192px; left: 23.75%;  display: block;">
        <img src="img/personal-guide2.png">
    </div>
    <a class="pos-abs-bl" id="guide2" href="javascript:;" style="bottom: 20%; left: 30%; width: 100px; z-index: 999;">
        <img src="img/personal-guide-btn.png">
    </a>
</div>

<script src="js/jquery-1.11.1.min.js"></script>
<script>
    $(function () {
        $(window).resize(function () {
            $(".guide").css("left", $(".icon-packet").next().offset().left - 8);
            if ($(this).height() <= 500 && $(this).height() >= 400) {
                $("#guide2").css({"bottom": "20px", "left": "60%"});
            }
        }).trigger("resize");

        $("#guide2").click(function () {
            $("#disk2").fadeOut();
        });
    })
</script>
</body>
</html>